<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>登陆页面</title>
<link rel="stylesheet" href="./css/bootstrap.min.css">
<link rel="stylesheet" href="./css/iconfont.css">
<link rel="stylesheet" href="./css/common.css">
<style>
.form-horizontal div.form-group{
    margin-left:0;
    margin-right:5px;
    /* width: 300px; */
}

.login-newbg {
    position: absolute;
    /* z-index: 1; */
    top: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    width: 1200px;
    height: 600px;
    display: block;
    
}
.logo {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;
    display: block;
}
.logo h1 {
    display: block;
    float: left;
    zoom: 1;
    width: 110px;
    height: 74px;
    /* vertical-align: middle; */
}
.kuang{
    position: absolute;
    top: 120px;
    right: 20px;
    background-color: white;
    width: 400px;
    border-radius: 5%;
}
#header {
  height: 36px;
  border-bottom: 1px solid #cdcdcd;
  box-sizing: border-box;
  line-height: 35px;
  background-color: #f5f5f5;
}
#header .header_left {
  height: 35px;
  float: left;
}
#header .header_left li {
  float: left;
  height: 35px;
  margin: 0 6px;
}
#header .header_left li div {
  width: 79px;
  color: #919191;
}
#header .header_left li div span {
  font-size: 16px;
  margin-left: 7px;
  font-weight: bold;
  vertical-align: middle;
}
#header .header_left li div:hover {
  color: #ff8500;
}
#header .header_left li a {
  font-size: 12px;
  color: #919191;
}
#header .header_left li a:hover {
  color: #ff8500;
}
#header .header_right {
  height: 35px;
  float: right;
}
#header .header_right li {
  float: left;
  height: 35px;
  margin: 0 6px;
}
#header .header_right li span {
  font-size: 16px;
  margin-left: 7px;
  font-weight: bold;
  vertical-align: middle;
}
#header .header_right li i {
  font-size: 16px;
  margin-right: 5px;
  vertical-align: middle;
}
#header .header_right li a {
  font-size: 12px;
  color: #919191;
  vertical-align: middle;
}
#header .header_right li:hover {
  color: #ff8500;
}
#header .header_right li:hover a {
  color: #ff8500;
}
.cantainer{
    width: 1200px;
    margin: 0 auto;
}
</style>
</head>
<body>
    <div id="header">
        <div class="cantainer">
            <ul class="header_left">
                <li>
                   <div>
                       中国大陆<span class="iconfont icon-icon"></span>
                   </div>
                </li>
                <li>
                    <a href="#">亲，请登录</a>
                </li>
                <li>
                    <a href="#">免费注册</a>
                </li>
                <li>
                    <a href="#">手机逛淘宝</a>
                </li>
            </ul>
            <ul class="header_right">
                <li>
                   <div>
                       <a href="#">我的淘宝</a><span class="iconfont icon-icon"></span>
                   </div>
                </li>
                <li>
                    <i class="iconfont icon-gouwuche-copy"></i><a href="#">购物车</a><span class="iconfont icon-icon"></span>
                </li>
                <li>
                    <div>
                        <i class="iconfont icon-start"></i><a href="#">收藏夹</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
                <li>
                    <a href="#">商品分类</a>
                </li>
                <li>
                    <div>
                        <a href="#">千牛卖家中心</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
                <li>
                    <div>
                        <a href="#">联系客服</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
                <li>
                    <div>
                        <i class="iconfont icon-toggle"></i><a href="#">网站导航</a><span class="iconfont icon-icon"></span>
                    </div>
                </li>
            </ul>
        </div>    
    </div>
    <div class="logo">
        <h1>           
            <a href="//www.taobao.com" style="display: inline-block;width:100%;height:100%;">
                <img src="./img/logo.jpg" alt="" style="width:100%;height:100%;">
            </a>
        </h1>
    </div>  
<div style="margin:0 auto;width:1200px;height: 600px;position: relative;">
   <div class="login-newbg" style="background-image: url(https://gtms01.alicdn.com/tps/i1/TB1GTCYLXXXXXcHXpXXcoeQ2VXX-2500-600.jpg);">

<div class="kuang">
    <div class="h2 text-center">密码登录</div>
<form class="form-horizontal">
    <div class="form-group" >
        <label for="inputEmail3" class="col-sm-2 control-label"style="width:80px;" >账号：</label>
        <div class="col-sm-10" style="width:200px;">
        <input type="text" class="form-control" id="username" placeholder="会员名/邮箱/手机号" style="width:200px;">
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label" style="width:80px;">密码：</label>
        <div class="col-sm-10" style="width:200px;">
        <input type="password" class="form-control" id="password" placeholder="请输入密码"style="width:200px;">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
        <div class="checkbox">
            <label>
            <input type="checkbox" name="remember"> 记住账号密码
            </label>
        </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
        <button type="button" class="btn btn-default" style="background:#f40;">登陆</button>
        </div>
    </div>
    <a href="register.html" style="float: right;margin-right: 30px;margin-bottom: 5px;">
        免费注册
    </a>
</div> 
</div>
</form>
</div>

</body>
<script src="./js/promiseAjax.js"></script>
<script src="./js/cookie.js"></script>
<script type="text/javascript">
var u = document.querySelector("#username");
var uname = getCookie("uname");
if(uname){
    
    u.value = uname;
}else{
    u.value = '';
}

var btn = document.querySelector("button[type='button']");
btn.addEventListener("click",login);
function login(){
    var username = u.value.trim();
    var password = document.querySelector("#password").value.trim();
    var rem = document.querySelector("[name='remember']");
    pAjax({
        url:"./server/login.php",
        type:"post",
        data:{
            username:username,
            password:password
        }
    }).then(function(res){
        if(res.status==200){
            setCookie("username",username,7200);
            if(rem.checked){
                setCookie("uname",username,3600*24*7);
            }else{
                removeCookie("uname");
            }
            alert(res.msg);
            location.href = 'home.html';
        }else{
            alert(res.msg);
            return;
        }
    });
}
</script>
</html>